<template>
  <div class="home_footer">
    <div class="display_strad display_strad2">
      <div class="footer_div1">
        <i class="footer_div1_i" @click="isShowRandom = true">
          <img src="../../assets/images/caipiao/footer01.png" alt />
        </i>
        <div class="footer_div1_div zhenghe_footer">
          <input
            type="number"
            class="xuazhu_input"
            placeholder="输入金额"
            @input="changeInput"
            v-model="amount_money"
          />
        </div>
      </div>
      <button class="footer_xiazhu" @click="handlerSubmitNow">立即下注</button>
      <span class="footer_a aa" @click="addCart">确认选号</span>
    </div>
    <van-popup v-model="isShowRandom" position="bottom">
      <van-picker
        show-toolbar
        :columns="randomPicker"
        @cancel="randomCancel"
        @confirm="randomConfirm"
      />
    </van-popup>
  </div>
</template>

<script>
import { mapState } from "vuex";

export default {
  props: {},
  data() {
    return {
      isShowRandom: false,
      randomPicker: [
        { text: "随机1注", value: 1 },
        { text: "随机5注", value: 5 },
        { text: "随机10注", value: 10 }
      ],
      amount_money: ""
    };
  },
  computed: {
    ...mapState(["multiple", "amount_model", "current_play_type"])
  },
  methods: {
    addCart(ev){
      this.$emit('addCart', this.amount_money);
    },
    clear(){
      this.amount_money = ''
    },
    handlerSubmitNow() {
      if(!this.$store.state.is_bet){
        this.$toast('开奖前一分钟禁止下注');
        return
      }
      this.$emit("handlerSubmitNow", this.amount_money);
    },
    // 随机下注
    randomConfirm(val) {
      this.$emit("randomConfirm", val.value);
    },
    // 輸入金額
    changeInput(ev) {
      this.amount_money = parseInt(ev.target.value);
    },
    // 随机下注close
    randomCancel() {
      this.isShowRandom = false;
    }
  }
};
</script>

<style scoped>
.display_strad2 .aa {
  background-color: rgb(209, 116, 39);
}
</style>
